<template>
  <div class="definite">
    <u-navbar
      :is-back="true"
      :custom-back="BackM"
      title="会员升级"
      back-text=""
    >
    </u-navbar>
    <div class="item-content" v-for="(item,index) in showDatas " :key="index" >
      <div class="img">
        <img src="../../../style/image/order/B2.png" alt="" />
      </div>
      <div class="item">
        <span class="item-one">一级会员</span>
        <span class="item-two">¥1250.00</span>
      </div>
      <div class="item-three">
        首次免费领取电宝底座5台，续费则继续领取取电宝底座5
      </div>
      <button class="button">会员升级</button>
    </div>


      <u-popup v-model="show" mode="bottom">
      <view class="modelPP">
        <div class="modelP">

          <view style="text-align: center">
            <view style="padding: 0rem 0.5rem 0.5rem 0.5rem">支付方式</view>
          </view>

          <div class="item-one">
            <div class="item-one-left">
              <img
                style="width: 1rem; height: 1rem"
                class="one-img"
                src="../../../style/image/order/yue.png"
                alt=""
              />
              <div style="padding-left: 1.8rem">余额支付(¥9800.00)</div>
            </div>
            <img
              class="two-img"
              src="../../../style/image/cargo/round.png"
              alt=""
            />
          </div>

          <div class="item-one">
            <div class="item-one-left">
              <img
                style="width: 1rem; height: 1rem"
                class="three-img"
                src="../../../style/image/order/C2.png"
                alt=""
              />
              <div style="padding-left: 1.8rem">微信支付</div>
            </div>

            <img
              class="two-img"
              src="../../../style/image/cargo/round.png"
              alt=""
            />
          </div>

          <div class="item-one">
            <div class="item-one-left">
              <img
                style="width: 1rem; height: 1rem"
                class="three-img"
                src="../../../style/image/order/apily.png"
                alt=""
              />
              <div style="padding-left: 1.8rem">支付宝支付</div>
            </div>

            <img
              class="two-img"
              src="../../../style/image/cargo/round.png"
              alt=""
            />
          </div>

        </div>

        <div class="HR"></div>

        <div>
              <div class="footP">
      <div
        @click="addPosM"
        style="
        height: 2.5rem;
        line-height: 2.5rem;
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
        "
      >
        <!-- <img style="width: 1rem;" src="../../style/image/cargo/add.jpg" alt=""> -->
        <div   style="margin-left: 0.2rem; display: flex; align-items: center;opacity: 0;">
          <img
            style="width: 1rem; height: 1rem"
            src="../../../style/image/cargo/selectRound.png"
            alt=""
          />
          <div
            style="
              font-size: 0.7rem;
              font-family: PingFang SC;
              font-weight: 300;
              color: #666666;
              margin-left: 0.5rem;
            "
          >
            全选
          </div>
        </div>

        <div class="foot-right" style="margin-right: 0rem">
          <div
            style="
              font-size: 0.73rem;
              font-family: PingFang SC;
              font-weight: 300;
            "
          >
            需支付:<span style="color: red">¥3.00</span>
          </div>
          <div class="settle">去支付</div>
        </div>
      </div>
    </div>
        </div>

      </view>
    </u-popup>
 
  </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  showDatas=[1,23,3,4]

  public  show = true;

  created() {}

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
    //  uni.navigateTo({
    // url: './selectBusin'
    // });
  }
  BackM(){
    
  }
}
</script>

<style  scoped>
.definite {
  font-family: PingFang SC;
  background: #f3f5f7;
  height: 100vh;
}
uni-page-body {
  height: 100%;
}
.item-content {
  padding: 0.7rem 0 0.7rem 0.7rem;
  height: 3.6rem;
  background: #ffffff;
  font-family: PingFang SC;
  margin-bottom: 0.03rem;
  position: relative;
  border-bottom: 0.03rem #e5e5e5 solid;
}
.img {
  float: left;
}
.img img {
  width: 3.23rem;
  height: 3.23rem;
}
.item {
  float: left;
  padding-left: 0.7rem;
  line-height: 1.6rem;
}
.item-one {
  padding-right: 1rem;
  font-size: 0.75rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #1a1a1a;
}
.item-two {
  font-size: 0.65rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #ff0000;
  line-height: 0.93rem;
}
.item-three {
  float: left;
  width: 8.5rem;
  padding-left: 0.7rem;
  font-size: 0.55rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: #808080;
  line-height: 0.75rem;
}
.button {
  width: 3.56rem;
  height: 1.3rem;
  background: #02af74;
  border-radius: 1rem 0rem 0rem 1rem;
  position: absolute;
  top: 1.85rem;
  right: 0;
  cursor: pointer;
  font-size: 0.55rem;
  font-family: PingFang SC;
  font-weight: 500;
  color: #ffffff;
}

.modelP {
  padding: 0.5rem 1rem;
}

.item-one {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eaedf0;
  padding: 0.5rem;
}
.item-one-left {
  display: flex;
  align-items: center;
}
.top-img {
  position: absolute;
  top: 1.6rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.85rem;
  color: #666666;
}
.img-one {
  position: absolute;
  top: 0.8rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.85rem;
  color: #666666;
}

.two-img {
  width: 1rem;
  height: 1rem;
}
.HR {
  height: 0.5rem;
  background-color: #f3f5f7;
}

.footP {
  /* position: absolute; */
  bottom: 0;
  background-color: white;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.content-bottom {
  margin: 1rem;
}

.car-content {
  padding: 0rem 0.5rem 0.5rem 0.5rem;
}

.foot-right {
  display: flex;
}

.settle {
  background-color: #02af74;
  height: 100%;
  width: 5rem;
  text-align: center;
  font-size: 0.8rem;
  font-family: PingFang SC;
  font-weight: 400;
  color: white;
  margin-left: 1rem;
}
</style>